<template>
  <div>
  <el-form ref="form" :model="formUnit" :rules="rules" label-width="150px">
    <el-row :gutter="15">
      <el-col :span="12">
        <el-form-item label="单位名称" prop="unitName">
          <el-input disabled v-model="formUnit.unitName" placeholder="请输入单位名称" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="组织机构代码">
          <el-input disabled v-model="formUnit.unitInstitutionId" placeholder="请输入组织机构代码" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-form-item label="法定代表人" prop="unitRepresentative">
          <el-input disabled v-model="formUnit.unitRepresentative" placeholder="请输入法定代表人" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="法定代表人联系电话" prop="unitRepresentativePhone">
          <el-input disabled v-model="formUnit.unitRepresentativePhone" placeholder="法定代表人联系电话" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-form-item label="联系人" prop="unitLinkman">
          <el-input disabled v-model="formUnit.unitLinkman" placeholder="请输入联系人" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系电话" prop="unitPhone">
          <el-input disabled v-model="formUnit.unitPhone" placeholder="请输入联系电话" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-form-item label="单位类型" prop="unitType">
          <el-select disabled v-model="formUnit.unitType" placeholder="请选择单位类型" style="width:100%">
            <el-option
              v-for="type in unitTypeOptions"
              :key="type.unittypeId"
              :label="type.unittypeName"
              :value="type.unittypeId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="单位序号" prop="unitSort">
          <el-input disabled v-model="formUnit.unitSort" placeholder="请输入单位序号" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-form-item label="资质等级">
          <el-input disabled v-model="formUnit.unitNaturalGrade" placeholder="请输入资质等级" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="资质范围">
          <el-input disabled v-model="formUnit.unitNaturalScope" placeholder="请输入资质范围" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-form-item label="注册地址" prop="unitAddress">
          <el-input disabled v-model="formUnit.unitAddress" placeholder="请输入注册地址" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="单位邮箱" prop="unitEmail">
          <el-input disabled v-model="formUnit.unitEmail" placeholder="请输入单位邮箱" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-form-item label="可中签次数" prop="unitNum">
          <el-input disabled v-model="formUnit.unitNum" min="1" type="number" placeholder="请输入每月可中签次数" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="备注" prop="unitRemarks">
          <el-input disabled v-model="formUnit.unitRemarks" placeholder="请输入内容" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-form-item label="是否注册在高新区">
          <el-radio-group disabled v-model="formUnit.whetherRegister">
            <el-radio label="0" >是</el-radio>
            <el-radio label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否税收在高新区">
          <el-radio-group disabled v-model="formUnit.whetherRevenue">
            <el-radio label="0" >是</el-radio>
            <el-radio label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="15">
        <el-col :span="12">
          <div style="margin-left: 25px">
            <el-button
              type="text"
              @click="
                () => {
                  handleProject(7);
                  title = '项目进行中';
                }
              "
              >进行中项目</el-button
            >
            <el-button
              type="text"
              @click="
                () => {
                  handleProject(8);
                  title = '已完成项目';
                }
              "
              >已完成项目</el-button
            >
          </div>
        </el-col>
      </el-row>
  </el-form>
  <Projects
      :visible.sync="projectVisible"
      :title="title"
      :projects="projects"
      :pagination.sync="pagination"
      @refresh="refresh"
    />
  </div>
</template>

<script>
import Projects from "../detailDialog/components/projects.vue";
import { getDeptExtractList } from "@/api/unit/random";

export default {
  
  name: "unitDetail",
  components: {
    Projects,
  },
  props:['formUnit', "visible"],
  data() {
    return {
      projectVisible: false,
      title: "",
      projects: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      randomBan: 7,
    };
  },
  methods: {
    handleProject(randomBan) {
      this.randomBan = randomBan;
      getDeptExtractList({
        randomUnitId: this.formUnit.unitId,
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        randomBan,
      }).then((res) => {
        this.pagination.total = res.total;
        if (res.code == 200) {
          res.rows.forEach((item, index) => {
            item.index = index + 1;
            item.state = "中标";
          });
          this.projects = res.rows;
          this.projectVisible = true;
        }
      });
    },
    refresh() {
      this.handleProject(this.randomBan);
    },
  },
}
</script>

<style scoped>

</style>
